<template>
	<view class="main">
		<view class="content">
			<view class="topbg">
				<view class="userinfo">
					<view class="left">
						<image :src="userInfo.portrait" mode="aspectFit" class="uicons"></image>
						<view class="usertxt">
							<view class="">
								<text class="username">{{member.mobile||'用户昵称'}}</text>
								<text class="level">{{member.level||'用户等级'}}</text>
							</view>
							<view class="usertime" v-show="userInfo.member_group_id>0">激活时间：{{userInfo.active_time|formatDate}}</view>
							<view class="usertime" v-show="userInfo.member_group_id<=0">当前状态：未激活</view>
							<view class="usertime" v-show="userInfo.member_group_id>0">到期时间：{{userInfo.expire_time|formatDate}}</view>
						</view>
					</view>
					<view class="">
						<view class="r-btns" @click="openActivation()">
							<u-icon name="lock" color="#fff" size="22"></u-icon>
							<text class="txts">{{userInfo.member_group_id<=0?"激活":'/续费'}}</text>
						</view>
					</view>
				</view>
				<view class="zc-card" @click="gotopage('/pages/Mine/asset/asset?money='+member.money)">
					<view class="zc-txt">总资产(USDT)</view>
					<view class="zc-num">
						<view class="nums">{{member.money}}</view>
						<u-icon name="arrow-right" color="#a8c6ff" size="28"></u-icon>
					</view>
				</view>
				<!-- <view class="btn-group">
					<view class="btn-item" @click="gotopage('/pages/Mine/recharge/recharge')">
						<image src="../../static/images/btn/cz.png" mode="aspectFit" class="icos"></image>
						<text class="btn-txt">充值</text>
					</view>
					<view class="btn-item" @click="gotopage(`/pages/mention/mention`,1)">
						<image src="../../static/images/btn/tb.png" mode="aspectFit" class="icos"></image>
						<text class="btn-txt">提币</text>
					</view>
					<view class="btn-item" @click="gotopage('/pages/transfers/transfers',1)">
						<image src="../../static/images/btn/hz.png" mode="aspectFit" class="icos"></image>
						<text class="btn-txt">互转</text>
					</view>
				</view> -->
				<view class="Tab-btn">
					<view class="tab-item" @click="gotopage('/pages/Mine/accredit/accredit')">
						<image src="../../static/images/btn/icon1.png" mode="aspectFill" class="ics"></image>
						<view class="btn-t">API授权</view>
					</view>
					<view class="tab-item" @click="gotopage('/pages/Mine/invitation/invitation?par_value='+par_value,1)">
						<image src="../../static/images/btn/icon2.png" mode="aspectFill" class="ics"></image>
						<view class="btn-t">激活码</view>
					</view>
					<view class="tab-item" @click="gotopage('/pages/Mine/earnings/earnings')">
						<image src="../../static/images/btn/icon3.png" mode="aspectFill" class="ics"></image>
						<view class="btn-t">量化收益</view>
					</view>
					<view class="tab-item" @click="gotopage('/pages/Mine/ranking/ranking')">
						<image src="../../static/images/btn/icon4.png" mode="aspectFill" class="ics"></image>
						<view class="btn-t">排行榜</view>
					</view>
					<view class="tab-item" @click="gotopage('/pages/Mine/community/community?par_value='+par_value)">
						<image src="../../static/images/btn/icon5.png" mode="aspectFill" class="ics"></image>
						<view class="btn-t">社区</view>
					</view>
				</view>
			</view>
			<view class="nav-item">
				<view class="item-list" @click="gotopages()">
					<image src="../../static/images/btn/ic1.png" mode="aspectFit" class="ic"></image>
					<view class="item-text">量化记录</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
				<view class="item-list" @click="gotopage('/pages/Mine/inviteFriends/inviteFriends')">
					<image src="../../static/images/btn/ic2.png" mode="aspectFit" class="ic"></image>
					<view class="item-text">邀请好友</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
				<view class="item-list" @click="gotopage('/pages/Mine/profile/profile')">
					<image src="../../static/images/btn/ic3.png" mode="aspectFit" class="ic"></image>
					<view class="item-text">我的资料</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
				<view class="item-list" @click="gotopage('/pages/Mine/about/about')">
					<image src="../../static/images/btn/ic4.png" mode="aspectFit" class="ic"></image>
					<view class="item-text">关于我们</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
				<view class="item-list" @click="gotopage('/pages/Mine/security/security')">
					<image src="../../static/images/btn/ic5.png" mode="aspectFit" class="ic"></image>
					<view class="item-text">安全设置</view>
					<u-icon name="arrow-right" color="#BBBBBB" size="28"></u-icon>
				</view>
			</view>
		</view>
		<Nav :current="navActive"></Nav>
		<u-popup v-model="isActivation" mode="center" border-radius="14" closeable>
			<view class="card-c">
				<view class="txt5">
					激活
				</view>
				<view class="">
					<view class="txt6">
						激活码
					</view>
					<u-input v-model="code" :border="true"   />
				</view>
				<view class="">
					<view class="txt6">
						交易密码
					</view>
					<u-input v-model="paw" type="password" :border="true"  :password="true"/>
				</view>
				<view class="btn-bottoms" @click="activation">
					激活
				</view>
			</view>
		</u-popup>
		<u-modal v-model="show" @confirm="GoPwd" content="您还未设置交易码,设置后才能继续" confirm-text="去设置" show-cancel-button></u-modal>
	</view>
</template>

<script>
import Nav from '../../component/Nav.vue';
export default {
	components: {
		Nav
	},
	data() {
		return {
			show:false,
			par_value:0,
			navActive: 4,
			member:{},
			userInfo:{},
			currency:{},
			isActivation:false,
			code:'',
			paw:''
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.getUserInfo()
		try {
		    const userInfo = uni.getStorageSync('userInfo');
		    if (userInfo) {
		        console.log('当前数据------',userInfo);
				if(userInfo){
					this.userInfo = userInfo
				}
		    }
		} catch (e) {
		    // error
		}
	},
	onPullDownRefresh() {
		this.getUserInfo()
	},
	onReachBottom(){

	},
	filters: {
		//格式化日期
		formatDate(e){
			let date = new Date(e*1000)
			console.log(date)
			let Y = date.getFullYear()
			let M = date.getMonth()+1
			let D = date.getDate()
			let h = date.getHours()
			let m = date.getMinutes()
			let s = date.getSeconds()
			if(M<10){
				M="0"+M
			}
			if(D<10){
				D="0"+D
			}
			if(h<10){
				h="0"+h
			}
			if(m<10){
				m="0"+m
			}
			if(s<10){
				s="0"+s
			}
			return `${Y}-${M}-${D} ${h}:${m}:${s}`
			
		}
	},
	methods: {
		//打开激活弹窗
		openActivation(){
			if(this.userInfo.safety_code){
				this.isActivation = true
			}else{
				this.show = true
			}
			
		},
		//去设置交易码
		GoPwd(){
			uni.navigateTo({
			    url: '/pages/PassWord/password?type=1'
			});
		},
		//点击激活
		activation(){
			this.$http({
				url:this.$api.activation,
				method:'POST',
				hideLoading:false,
				data:{
					code:this.code,
					safety_code:this.paw
				},
				success:res=>{
					console.log('激活接口返回----------',res)
					if(res.code==201){
						uni.showToast({
						    title:res.msg,
						    duration: 1000,
							icon:'none'
						});
						this.isActivation = false
						this.code = ''
						this.paw = ''
					}
				},complete:e=>{
					console.log('返回-----------',e)
					uni.hideLoading();
				}
			})
		},
		// 获取用户信息
		getUserInfo(){
			this.$http({
				url:this.$api.user,
				method:'GET',
				hideLoading:true,
				success:res=>{
					console.log('用户信息----------',res)
					this.member = res.data.member
					this.currency = res.data.currency
					this.par_value = res.data.par_value
					try {
					    uni.setStorageSync('currency', res.data.currency);
					    uni.setStorageSync('member', res.data.member);
					} catch (e) {
					    // error
					}
				},complete:e=>{
					uni.stopPullDownRefresh();
				}
			})
		},
		gotopage(e,ispwd) {
			//如果ispwd=1需要先设置交易码
			if(ispwd){
				if(!this.userInfo.safety_code){
					this.show = true
				}else{
					uni.navigateTo({
						url: e
					});
				}
			}else{
				uni.navigateTo({
					url: e
				});
			}
			
		},
		gotopages(){
			uni.navigateTo({
				url:'/pages/Mine/record/record'
			})
		}
	}
};
</script>

<style scoped>
.main {
	min-height: 90vh;
	background: #f8f8f8;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
.icos {
	width: 30rpx;
	height: 30rpx;
}
.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.topbg {
	background: #2f73fd;
	height: 500rpx;
	width: 100%;
}
.userinfo {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 50rpx 28rpx 50rpx 28rpx;
}
.userinfo .left{
	width: calc(100% - 260rpx);
	display: flex;
	align-items: center;
}
.uicons {
	height: 110rpx;
	width: 110rpx;
	border-radius: 100%;
	background: url(../../static/header.png)center center no-repeat;
	background-size: 100%;
}
.usertxt {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 20rpx;
}
.usertxt>view{
	display: flex;
	align-items: center;
}
.username {
	font-size: 36rpx;
	color: #fff;
	font-weight: 600;
	margin-right: 10rpx;
	margin-bottom: 5rpx;
}
.level {
	height: 36rpx;
	padding:0 20rpx;
	background: #fff;
	color: #2f73fd;
	border-radius: 18rpx;
	display: inline-block;
	line-height: 36rpx;
	font-size: 22rpx;
	text-align: center;
	margin-bottom: 5rpx;
}
.usertime {
	font-size: 20rpx;
	color: #a8c6ff;
	line-height: 28rpx;
	margin-top: 4rpx;
}
.r-btns {
	padding:0 40rpx;
	height: 44rpx;
	background: rgba(168, 198, 255, 0.3);
	border-radius: 22px;
	padding: 0 14rpx;
	margin-top: 20rpx;
	text-align: center;
}
.txts {
	font-size: 22rpx;
	font-weight: 400;
	color: #fff;
	line-height: 44rpx;
	margin-left: 5rpx;
}

.zc-txt {
	font-size: 30rpx;
	color: #a8c6ff;
	line-height: 32rpx;
	margin-left: 38rpx;
	margin-top: 38rpx;
}
.zc-num {
	display: flex;
	justify-content: space-between;
	height: 65rpx;
	margin: 14rpx 38rpx;
	align-items: center;
}
.nums {
	color: #fff;
	font-size: 56rpx;
	font-weight: 600;
}
.btn-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 32rpx;
}
.btn-item {
	background: #fff;
	border-radius: 50rpx;
	padding: 14rpx;
	width: 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-txt {
	font-size: 28rpx;
	color: #131415;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	margin: 0 16rpx;
}
.Tab-btn {
	width: 694rpx;
	height: 180rpx;
	background: #fff;
	border-radius: 20rpx;
	margin: 40rpx auto 0 auto;
}
.ics {
	width: 90rpx;
	height: 90rpx;
}
.Tab-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tab-item {
	margin: 20rpx;
}
.btn-t {
	height: 32rpx;
	font-size: 22rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1a1c22;
	line-height: 32rpx;
	text-align: center;
}
.ic {
	height: 38rpx;
	width: 38rpx;
}
.nav-item {
	margin-top: 40rpx;
}
.item-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 694rpx;
	margin: 25rpx auto;
	background: #ffffff;
	padding: 38rpx 28rpx;
	border-radius: 15rpx;
}
.item-text {
	text-align: left;
	flex: 1;
	margin-left: 14rpx;
}
.card-c{
		background: #FFFFFF;
		width: 672rpx;
		height: 700rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 56rpx ;
	}
	.txt5{
		text-align: center;
		font-size:32rpx ;		
		font-weight: 600;
		color: #222222;
		line-height: 44rpx;
	}
	.txt6{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;	
	margin: 26rpx 0;
	}

	.btn-bottoms{
		width: 360rpx;
		height: 80rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166,196,255,1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 50rpx auto;
		color: #fff;
		font-size: 32rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
